"use strict";
import * as React from 'react';
const { View, StyleSheet, FlatList, TouchableOpacity, DeviceEventEmitter } = require('react-native');
const NavigationBar = require('react-native-navbar').default;
const { Actions } = require("react-native-router-flux");
const { connect } = require('react-redux');
import { autoSize, commonProps, commonStyles } from "../../assets/styles/common";
import NavRightButton from "../../component/RightButton";
import Avatar from "../../component/Avatar";
import MyText from "../../component/MyText";
import Colors from "../../assets/styles/Colors";
import { messageStyle } from "../../assets/styles/message";
import Request from "../../utils/Request";
class Page extends React.Component {
    constructor() {
        super(...arguments);
        this.goToPage = (sceneKey, props = {}) => {
            Actions.push(sceneKey, props);
        };
        this.getNewMessageCount = (item) => {
            let count = 0;
            this.props.message.list.map((m) => {
                if (m && item.receiver === m.username) {
                    count++;
                }
            });
            return count > 0 ? `(${count}条新消息)` : '';
        };
        this.renderItem = (props) => {
            const item = props.item;
            return (<TouchableOpacity onPress={this.goToPage.bind(this, 'chat', { title: item.receiverName, receiver: item.receiver })}>
                <View style={[commonStyles.flexRow, messageStyle.messageContainer]}>
                    <View style={[commonStyles.centerVH]}>
                        <Avatar source={{ uri: Request.checkImageUrl(item.receiverAvatar) }} size={autoSize(65)}/>
                    </View>
                    <View style={[commonStyles.flexColumn, commonStyles.flex1, messageStyle.infoContainer]}>
                        <MyText style={messageStyle.text} fontSize={15} color={Colors.Title}>{`${item.receiverName}${this.getNewMessageCount(item)}`}</MyText>
                        <MyText style={messageStyle.text} fontSize={15} color={Colors.Title} numberOfLines={1}>{item['newMessage'] ? '' : ''}</MyText>
                        <MyText style={messageStyle.text} fontSize={12} color={Colors.SubTitle}>{item.updated}</MyText>
                    </View>
                </View>
            </TouchableOpacity>);
        };
        this.onRefresh = () => {
            this.props.dispatch({ type: 'chat/fetchFriends' });
        };
    }
    render() {
        return (<View style={[commonStyles.container, { backgroundColor: Colors.White }]}>
                <NavigationBar {...commonProps.navBar} rightButton={<NavRightButton icon={{ name: 'icon-biji-copy', color: Colors.White, size: autoSize(24) }} onPress={Actions.newMessage}/>} title={{ title: this.props.title, tintColor: '#fff' }}/>
                <FlatList data={this.props.chat.friendList} extraData={this.props} onRefresh={this.onRefresh} refreshing={this.props.chat.loading} keyExtractor={(_, index) => index} renderItem={this.renderItem}/>
            </View>);
    }
}
export default connect(({ auth, chat, message }) => ({ auth, chat, message }))(Page);
